<template>
  <div class="cash">
    <el-form label-width="120px">
      <el-form-item label="收款地址">
        <el-input v-model="recipient" />
      </el-form-item>
      <el-form-item label="提现金额">
        <el-input-number v-model="amount" :min="fee+1" :max="balance" controls-position="right" @change="handleChange"/>
        (当前可用余额：{{ balance }})
      </el-form-item>
      <el-form-item label="可用金额">
        {{ balance }} dlb
      </el-form-item>
      <el-form-item label="交易费">
        {{ fee }} dlb
      </el-form-item>
      <el-form-item label="实际到账">
        {{ (amount - fee > 0) ? amount - fee : 0 }} dlb
      </el-form-item>
      <el-form-item>
        <el-button :disabled="balance-fee>0?false:true" type="primary" @click.native="onSubmit">提现</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { postRecharge } from '@/api/table'
import { getToken } from '@/utils/auth'
export default {
  name: 'Cash',
  data() {
    return {
      fee: 1,
      balance: 0,
      recipient: 'b1dab07ed424171e0d8dfb9fcea5d17deb7d2315',
      amount: 0
    }
  },
  mounted() {
    this.balance = Number(getToken('balance'))
    this.amount = this.balance
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    onSubmit() {
      if (!this.recipient) {
        this.$alert('请输入收款地址', '提示', {
          confirmButtonText: '我知道了',
          center: true
        })
        return false
      }
      this.$confirm('请再次确定您的收款地址，继续操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.toTrade()
      })
    },
    toTrade() {
      postRecharge({
        type: 2,
        recipient: this.recipient,
        amount: this.amount
      }).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cash{
  width: 500px;
  max-width: 100%;
  padding: 30px 0;
}
</style>
